<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式优先级</title>
    <style>
        .style1 {
            /*希望这个样式不管定义到哪里，优先级都是最高都 */
            background-color: lightblue !important;
        }

        #testId {
            background-color: lavenderblush;
        }

        .style2 {
            background-color: hotpink;
        }
        /*属性选择器，通过[]可以进行标签舒心的选择，包含这个属性的标签，会被选择到*/
        [title] {
            color: lightskyblue;
        }

        div{
            background-color: lightcoral;
        }

        * {
            background-color: lightgoldenrodyellow;
        }
    </style>
</head>
<body>
<div class="style1 style2">
    1. 使用important关键字的样式。引用背景
</div>
<div style="background-color: aquamarine" class="style2S">
    2. 行内样式优先级高于别的样式
</div>
<div class="style2" id="testId">
    3. 通过id选择器设置的样式
</div>
<div class="style2" title="tledu">
    4. 类选择器、属性选择器、伪类选择器、伪元素
</div>
<div>
    5. 元素选择器
</div>
<p>
    6. 通配符
</p>
</body>
</html>